---
import  "@styles/scss/tocbot/tocbot.scss";
---
 
 
 <!-- 目录id="article-catalog" -->
<div class="shrink-0 tocbot-wrapper  max-xl:mx-0 ml-2 mb-2 overflow-auto rounded-lg max-h-[100vh-70px]" id="aside-catalog-box">
    <div class="toc columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700" id="article-catalog">

    </div>
</div>

<script>
    import * as tocbot from "tocbot";
  
    function generateHeadingIds() {
      // 获取 contentSelector 指定的元素
      const contentElement = document.querySelector("#article-content");

      if(!contentElement){
        document.querySelector("#aside-catalog-box")?.classList.add("hidden");
        return;}
  
      // 遍历 contentElement 下的标题元素（默认支持 h1-h6）
      const headings = contentElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
  
      headings.forEach((heading, index) => {
        // 如果当前标题已经有 id，则跳过
        if (heading.id) return;
        const headingId = `${heading.textContent}-${index}`;
        // 设置标题的 id
        heading.id = headingId;
      });
    }
  
    // 在初始化 Tocbot 之前调用此函数
    generateHeadingIds();
  
    tocbot.init({
      // Where to render the table of contents.
      tocSelector: "#article-catalog",
      // Or, you can pass in a DOM node instead
      // tocElement: element,
      // Where to grab the headings to build the table of contents.
      contentSelector: "#article-content",
      headingSelector: "h1, h2, h3, h4, h5, h6",
      // For headings inside relative or absolute positioned containers within content.
      hasInnerContainers: true,
      headingsOffset: 68,
      scrollSmoothOffset: -70,
      tocScrollOffset: 90,
      includeTitleTags: true,
      //展开层数
      collapseDepth: 6,
      //是否跳过渲染
      skipRendering: false,
    });
  
  </script>
  